<%@ page isELIgnored="false" language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>


<script type="text/javascript">
    $(function(){
        /*加载登录对话框设置加载时隐藏属性  */
        $("#addAlbumDialog").dialog({
            title: "添加框",
            width: 600,
            height: 300,
            closed: true,
            buttons:[{
                text:"添加",
                handler:function(){
                    doadd();
                },
            }],
        });
        /*加载修改对话框设置加载时隐藏属性---------------END  */
        $("#updateAlbumDialog").dialog({
            title: "修改框",
            width: 600,
            height: 500,
            closed: true,
            buttons:[{
                text:"修改",
                handler:function(){
                    doUpdateAlbumDialog();
                },
            }],
        });
        /*加载修改对话框设置加载时隐藏属性---------------END  */



       $("#allAlbum").datagrid({
           fit:"true",
           pagination:"true",
           url:"${pageContext.request.contextPath}/Album/selectAllAlbum.do",
           columns:[[
               {field:'albumId',checkbox:"true"},
               {field:'albumImage',title:'专辑图片',width:100,formatter: function(value,row,index){
                   return "<img style='width:32px;height:32px;' border='1' src='${pageContext.request.contextPath}/img"+row.albumImage+"'/>";
                   }
               },

               {field:'albumName',title:'专辑名',width:100},
               {field:'albumAuthor',title:'作者',width:100},
               {field:'albumTeller',title:'播音员',width:100},
               {field:'albumEpisode',title:'集数',width:100},
               {field:'albumDate',title:'上架日期',width:100},
               {field:'albumContent',title:'简介',width:100},
               {field:'albumStar',title:'评价星级',width:100},
               {field:'albumState',title:'是否显示',width:100,
                    formatter: function(value,row,index){
                        if (row.albumState==0){
                            return "展示";
                        } else {
                            return "不显示";
                        }
                    }
                 },
           ]],
           toolbar: [{
               /*添加工具  */
               text: "添加",
               iconCls: 'icon-add',
               handler: function () {
                   /*打开添加对话框  */
                   $("#addAlbumDialog").panel('open');
               },
               /*添加工具-----------end  */
           },{
               iconCls: 'icon-help',
               text:'删除选中',
               handler: function() {
                   $.messager.confirm("确认框", "您确认想要删除记录吗？", function (r) {
                       if (r) {
                           /*获取选中的行对象  */
                           var hang = $("#allAlbum").datagrid("getSelections");
                           var ids = new Array();
                           for (var i = 0; i < hang.length; i++) {
                               ids[i] = hang[i].albumId;
                           }
                           /*重新发送ajax请求删除选中的id集合  */
                           $.ajax({
                               url: "${pageContext.request.contextPath}/Album/delateAlbum.do",
                               data: {"ids": ids},
                               type: "post",
                               /*提示ajax不做深度解析  */
                               traditional: true,
                               success: function (data) {
                                   if (data.isok) {
                                       $.messager.alert("消息", "删除成功");
                                       $("#allAlbum").datagrid("reload");

                                   } else {
                                       $.messager.alert("消息", "删除失败");
                                       $("#allAlbum").datagrid("reload");
                                   }
                               }
                           });
                       }
                   });
               }
           }],
           onDblClickRow: function (index, rowDate) {
              $("#updateAlbumDialog").panel('open');
               $("#albumId").val(rowDate.albumId);
               $("#albumImage").val(rowDate.albumImage);
               $("#updateAlbumDialogImage2").prop("src","${pageContext.request.contextPath}/img"+rowDate.albumImage);
               $("#albumName").val(rowDate.albumName);
               $("#albumAuthor").val(rowDate.albumAuthor);
               $("#albumTeller").val(rowDate.albumTeller);
               $("#albumContent").val(rowDate.albumContent);

                 if(rowDate.albumState==0){
                    $("#radio1").prop("checked",true);
                }else {
                    $("#radio2").prop("checked",true);
                }
                console.log(rowDate.albumStar);

                if(rowDate.albumStar==1){
                    $("#albumStar1").prop("checked",true);
                }else if(rowDate.albumStar==2) {
                    $("#albumStar2").prop("checked",true);
                }else if(rowDate.albumStar==3) {
                    $("#albumStar3").prop("checked",true);
                }else if(rowDate.albumStar==4) {
                    $("#albumStar4").prop("checked",true);
                }else if(rowDate.albumStar==5) {
                    $("#albumStar5").prop("checked",true);
                }

               console.log(rowDate);
           },
       });
    });



    function doadd(){
        $("#addform").form("submit",{
            url:"${pageContext.request.contextPath}/Album/addAlbum.do",
            onSubmit: function(){
                //提交数据前需要的判断
                return true;
            },
            success:function(data){
                var data = eval('(' + data + ')');
                if(data.isok){
                    /*添加成功弹出对话框  */
                    $.messager.alert("消息","添加成功");
                    /*关闭对话框*/
                    $("#addAlbumDialog").dialog('close');
                    /*刷新table  */
                    $("#allAlbum").datagrid("reload");
                }else{
                    $.messager.alert("消息","添加失败");
                };
            }

        });
    }


    function doUpdateAlbumDialog(){
        $("#updateAlbumForm").form("submit",{
            url:"${pageContext.request.contextPath}/Album/updateAlbum.do",
            onSubmit: function(){
                return true;
            },
            success:function(data){
                var data = eval('(' + data + ')');  // change the JSON string to javascript object
                if(data.isok){
                    $.messager.alert("消息","修改成功");
                    /*刷新table  */
                    $("#updateAlbumDialog").dialog("close",true);
                    $("#allAlbum").datagrid("reload");
                }else{
                    $.messager.alert("消息","修改失败");
                };
            },

        });
    }






</script>


<script type="text/javascript">
    var image = '';
    function selectImage(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            document.getElementById('addAlbumDialogImage').src = evt.target.result;
            image = evt.target.result;
        }
        reader.readAsDataURL(file.files[0]);
    }
</script>
<script type="text/javascript">
    var image = '';
    function selectImage2(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            document.getElementById('updateAlbumDialogImage2').src = evt.target.result;
            image = evt.target.result;
        }
        reader.readAsDataURL(file.files[0]);
    }
</script>



<table id="allAlbum" class="easyui-datagrid" style="width:400px;height:250px">

</table>


<!--添加的对话框表  -->
<div id="addAlbumDialog" >
    <form id="addform" enctype="multipart/form-data" method="post">
        图片：<input type="file" value="" name="Image" onchange="selectImage(this);">
        <div class="lf salebd">
            <a href="#"><img id="addAlbumDialogImage" src="images/ad20.jpg" width="100" height="100" /></a>
        </div><br/>
        专辑名称：<input  name="albumName"><br/>
        作者：<input  name="albumAuthor"><br/>
        播音员：<input  name="albumTeller"><br/>
        专辑简介：<input  name="albumContent"><br/>
        专辑评价：1星<input type="radio" name="albumStar" value="1"><br/>
                2星<input type="radio" name="albumStar" value="2"><br/>
                3星<input type="radio" name="albumStar" value="3"><br/>
                4星<input type="radio" name="albumStar" value="4"><br/>
                5星<input type="radio" name="albumStar" value="5"><br/>
    </form>
</div>
<!--添加的对话框表 -----------end -->


<!--修改的对话框  -->
<div id="updateAlbumDialog" >
    <form id="updateAlbumForm" enctype="multipart/form-data" method="post">
        <input id="albumId" type="text" name="albumId" style="display: none">
        <input id="albumImage" type="text" name="albumImage" style="display: none">
        图片：<input type="file" value="" name="updateAlbumImage" onchange="selectImage2(this);">
        <div class="lf salebd">
            <a href="#"><img id="updateAlbumDialogImage2" src="" width="100" height="100" /></a>
        </div><br/>
        专辑名称：<input id="albumName"  name="albumName"><br/>
        作者：<input id="albumAuthor"   name="albumAuthor"><br/>
        播音员：<input id="albumTeller"  name="albumTeller"><br/>
        专辑简介：<input id="albumContent"   name="albumContent"><br/>
        专辑评价：1星<input type="radio" id="albumStar1"  name="albumStar" value="1"><br/>
        2星<input type="radio" id="albumStar2"  name="albumStar" value="2"><br/>
        3星<input type="radio" id="albumStar3"  name="albumStar" value="3"><br/>
        4星<input type="radio" id="albumStar4"  name="albumStar" value="4"><br/>
        5星<input type="radio" id="albumStar5"  name="albumStar" value="5"><br/>
        是否显示：<br/>显示<input id="radio1" type="radio" value="0" name="albumState"><br/>
                    不显示<input id="radio2" type="radio" value="1" name="albumState"><br/>

    </form>
</div>
<!--修改的对话框----------------end  -->
